<template>
  <van-action-sheet v-model:show="onShow" title="支付" @close="close">
    <div class="content">
      <template v-if="loading == 1">
        <van-loading class="pay-loading" size="1rem" vertical
          >支付结果查询中...</van-loading
        >
      </template>
      <template v-else-if="loading == 2">
        <div class="pay-loading pay-result">
          <van-icon name="success" />
          <span class="pay-result-desc">支付成功</span>
          <van-button block size="large" @click="onShow = false">完成</van-button>
        </div>
      </template>
      <template v-else-if="loading == 3">
        <div class="pay-loading pay-result">
          <van-icon name="cross" />
          <span class="pay-result-desc"
            >出错了{{ errText ? ":" + errText : "" }}</span
          >
          <div class="pay-result-group">
            <van-button size="large" @click="onShow = false">完成</van-button>
            <van-button size="large" type="primary" @click="topay"
              >重试</van-button
            >
          </div>
        </div>
      </template>

      <template v-else>
        <div class="txt">
          <div class="title">支付金额(元)</div>
          <div class="priceNumber">{{ price }}</div>
          <div class="safe">
            <img src="../assets/image/pay/safe.png" alt="" />
            <div class="safetext">资产保护中</div>
          </div>
        </div>

        <div class="pay-type">
          <div
            class="item_pay alipay"
            :class="payType == 'alipay' ? 'on' : ''"
            @click="choosePayType('alipay')"
          >
            <div class="img">
              <img src="../assets/image/pay/alipay.png" alt="" />
            </div>
            <div class="name">支付宝</div>
            <div
              class="select alipay"
              :class="payType != 'alipay' ? 'dis' : ''"
            >
              <img src="../assets/image/pay/true.png" alt="" />
            </div>
          </div>
          <div
            class="item_pay wxpay"
            :class="payType == 'wxpay' ? 'on' : ''"
            @click="choosePayType('wxpay')"
          >
            <div class="img">
              <img src="../assets/image/pay/wechat.png" alt="" />
            </div>
            <div class="name">微信</div>
            <div class="select wxpay" :class="payType != 'wxpay' ? 'dis' : ''">
              <img src="../assets/image/pay/true.png" alt="" />
            </div>
          </div>
          <div
            class="item_pay unionpay"
            :class="payType == 'unionpay' ? 'on' : ''"
            @click="choosePayType('unionpay')"
          >
            <div class="img">
              <img src="../assets/image/pay/bank.png" alt="" />
            </div>
            <div class="name">银联</div>
            <div
              class="select unionpay"
              :class="payType != 'unionpay' ? 'dis' : ''"
            >
              <img src="../assets/image/pay/true.png" alt="" />
            </div>
          </div>
          <div
            class="item_pay balance"
            :class="payType == 'balance' ? 'on' : ''"
            @click="choosePayType('balance')"
          >
            <div class="img">
              <img src="../assets/image/pay/balance.png" alt="" />
            </div>
            <div class="name">余额</div>
            <div
              class="select balance"
              :class="payType != 'balance' ? 'dis' : ''"
            >
              <img src="../assets/image/pay/true.png" alt="" />
            </div>
          </div>
        </div>

        <van-button block size="large" type="primary" @click="toPay"
          >前往支付</van-button
        >
      </template>
    </div>
  </van-action-sheet>
  <pay-pass :show="passShow" @close="inputPayPassWord" />
</template>

<script>
import { watch, computed } from "@vue/runtime-core";
import { ref } from "vue";
import { Toast } from "vant";
import payPass from "./pay-pass.vue";
import rechargeStore from '../store/recharge.js'
export default {
  components: { payPass },
  name: "all-pay",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "", // 充值类型,'recharge', 'goods', 'market'
    },
    order_id: {
      type: [Number, String], // 订单id
      default: 0,
    },
    price: {
      type: [Number, String],
      default: 0,
    },
    num: {
      type: [Number, String],
      default: 0,
    },
  },
  emits: ["close"],
  setup(props, ctx) {
    const price = computed(() => props.price);
    const order_id = computed({
      get: () => { 
        return props.order_id
      },
      set: (data) => { 
        console.log('计算属性', data)
        return data
      }
    });
    console.log(price.value);
    let onShow = ref(props.show);
    const payStatus = ref(0);
    watch(
      () => props.show,
      (newVal) => {
        onShow.value = newVal;
      }
    );

    const close = () => {
      ctx.emit("close", payStatus.value);
      console.log("order_id.value", order_id.value);
    };

    let payType = ref("alipay");
    const choosePayType = (data) => {
      payType.value = data;
    };

    let loading = ref(0); // 0默认，1支付中,2支付成功,3支付失败
    let passShow = ref(false);
    const toPay = () => {
      if (props.price <= 0) {
        return Toast.fail("付款金额不能为零");
      }
      if (payType.value == "balance") {
        passShow.value = true;
      } else {
        goPay();
      }
    };

    // 输入支付密码
    const payPassWord = ref("");
    const inputPayPassWord = (data) => {
      passShow.value = false;
      if (data) {
        payPassWord.value = data;
        goPay();
      }
    };

    // 支付密码输入完成
    const client = ref("wap");
    const recharge = rechargeStore()
    const goPay = () => {
      let data = {
        type: props.type,
        order_id: order_id.value,
        pay_type: payType.value,
        client: client.value,
        pay_password: payPassWord.value,
        amount: price.value
      };
      loading.value = 1;
      recharge.toRecharge(data).then(res => { 
        if (res.mode == 'balance') { 
          loading.value = 2
        }
        if (res.mode == 'recharge') { 
          order_id.value = res.order_id
        // } else if (res.mode == 'wap') { 
          
         }
      })
    };

    return {
      onShow,
      choosePayType,
      payType,
      close,
      loading,
      passShow,
      payPassWord,
      inputPayPassWord,
      toPay,
      goPay,
      client,
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;

  .txt {
    text-align: center;
    .title {
      padding-top: 20px;
      font-weight: bold;
      color: #6a6a6a;
    }
    img {
      width: 14px;
      height: 14px;
      margin-left: 5px;
    }
    .priceNumber {
      font-weight: bold;
      font-size: 35px;
      padding: 10px;
      padding-bottom: 0px;
    }
    .safe {
      display: flex;
      align-items: center;
      justify-items: center;
      color: #979797;
    }
  }

  .pay-type {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 30px;
    padding-bottom: 20px;
    padding-top: 40px;
    .item_pay {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      background-color: #f4f4f4;
      border-radius: 10px;
      margin-bottom: 10px;
      position: relative;
      .name {
        font-weight: bold;
        font-size: 16px;
      }
      img {
        width: 25px;
        height: 25px;
        margin-right: 10px;
      }

      &.on {
        &.alipay {
          border: solid 1px #1eaaeb;
        }
        &.wxpay {
          border: solid 1px #47a432;
        }
        &.unionpay {
          border: 1px solid #00908c;
        }
        &.balance {
          border: solid 1px #fe9c01;
        }
        .select {
          position: absolute;
          bottom: -1px;
          right: -1px;
          padding: 5px;
          width: 10px;
          height: 10px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 12px;
          img {
            width: 12px;
            height: 12px;
          }

          &.alipay {
            background-color: #1eaaeb;
          }
          &.wxpay {
            background: #47a432;
          }
          &.unionpay {
            background-color: #00908c;
          }
          &.balance {
            background-color: #fe9c01;
          }
        }
      }
    }
  }

  .dis {
    display: none;
  }

  .van-button--primary {
    border-radius: 0.4rem;
    width: 80%;
    background-color: black;
    color: white;
    border: black;
    margin-bottom: 30px;
  }
}
</style>